import React, { Component } from "react";
import { connect } from "react-redux";
import { addTodo } from "@src/actions";

class index extends Component {
  constructor(props) {
    super(props);
    let { dispatch } = props;
    this.dispatch = dispatch;
  }
  render() {
    let input;

    return (
      <div>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (!input.value.trim()) {
              return;
            }
            this.dispatch(addTodo(input.value));
            input.value = "";
          }}
        >
          <input
            ref={(node) => {
              input = node;
            }}
          />

          <button type="submit">Add Todo</button>
        </form>
      </div>
    );
  }
}

index = connect()(index);

export default index;